<html ng-app="myApp">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS实例3</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
		<style type="text/css">
			.page-info {
				background-color: lightgreen;
			}
		</style>
	</head>

	<body ng-controller="myController">

		<table>
			<tbody>
				<tr ng-repeat="restaurant in directory" ng-click="selectRestaurant($index)" ng-class="{'page-info': $index==selectedRow}">
					<td>{{$index}}</td>
					<td>{{restaurant.name}}</td>
					<td>{{restaurant.cuisine}}</td>
				</tr>
			</tbody>
		</table>
		<br />
		<div ng-include="'runoob.html'">

		</div>
		<script type="text/javascript">
			var myApp = angular.module('myApp', []);

			myApp.controller('myController', function($scope) {
				$scope.directory = [{
					name: "The Handsome Heifer",
					cuisine: "BBQ"
				}, {
					name: "Green's Green Greens",
					cuisine: "Salads"
				}, {
					name: "House of Fine Fish",
					cuisine: "Seafood"
				}];
				$scope.selectRestaurant = function(row) {
					$scope.selectedRow = row;
				};
			});

			//引用子页面的html，功能实现的js要放在父页面			
			myApp.controller('sitesCtrl', function($scope) {
				$scope.ShowMsg = function() {
					alert("子页面的内容操作");
				};
			});
		</script>
	</body>

</html>